<template>
  <!-- 头部 -->
  <div class="container flex items-center justify-between bg-white">
    <!-- Logo -->
    <img src="@/assets/images/logo.gif" alt="Logo" class="w-280 h-74 object-cover" />
    <!-- 搜索框 -->
    <div class="flex-1 max-w-md mx-6">
      <div class="relative">
        <input
          type="text"
          placeholder="请输入要搜索的内容"
          class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button class="absolute right-2 top-2.5 px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded">搜索</button>
      </div>
    </div>

    <!-- 右上角操作 -->
    <div class="text-sm">
      <div class="flex justify-end space-x-10 mb-2">
        <a href="#" class="text-blue-600 hover:underline">[登陆]</a>
        <a href="#" class="text-blue-600 hover:underline">[控制面板]</a>
        <a href="#" class="text-blue-600 hover:underline">[免费注册]</a>
        <a href="#" class="text-gray-600 hover:underline">忘记密码</a>
      </div>

      <div class="text-red-600 font-semibold">客服咨询：QQ195759770、微信15871745758</div>
    </div>
  </div>
</template>

<script setup name="SearchArea">
import { ref } from 'vue'

const searchQuery = ref('')

function onSearch() {
  // 这里可以处理搜索逻辑
  console.log('搜索内容:', searchQuery.value)
}
</script>

<style scoped>
input {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 4px 12px;
  border: none;
  background: #409eff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background: #66b1ff;
}
</style>
